<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="@./css/detail.css" />
    <script src="@./js/jquery.min.js"></script>
    
</head>
<body>
    
    <div id="content" class="content"  style="<%= contentSetting %>">
        <div class="content-list" id="contentList">
            <% if(contentList && contentList.length) { %>
                <% contentList.forEach(function(item,index){ %>
                    <div class="cur"><%= item %></div>
                 <% }); %>
            <% } else { %>
                <p>暂无数据</p>
            <% } %>
        </div>
    </div>

    <div id="empty" class="empty">
        <div style="font-style: italic;">
            <a custom-hover="true" style="cursor: pointer;">选择语言</a>或<a custom-hover="true" style="cursor: pointer;">填充模版</a>或<a custom-hover="true" style="cursor: pointer;">打开其他编辑器</a>以开始使用。<br>开始键入以关闭或<a custom-hover="true" style="cursor: pointer;">不再显示</a>
            此信息。
        </div>
    </div>

    <ul id="contextmenu">
        <li><a data-cmd='allChapter'>查看目录</a></li>
        <li><a data-cmd='prevChapter'>上一章</a></li>
        <li><a data-cmd='nextChapter'>下一章</a></li>
    </ul>

    <div id="chapter" class="chapter" >
        <div class="chapter-scroll" id="chapterScroll">
            <div class="list" id="chapterList">
                <% if(chapterList && chapterList.length) { %>
                    <% chapterList.forEach(function(item,index){ %>
                        <div data-index="<%= index %>" class="item <%= index === activeChapterIndex ? 'active' : '' %>"><%= item.title %></div>
                    <% }); %>
                <% } else { %>
                    
                <% } %>
            </div>
        </div>
        <div class="close"></div>
    </div>

</body>

<script>

  (function(){  

        const activeChapterIndex = "<%= activeChapterIndex %>";
        let vscode = acquireVsCodeApi ? acquireVsCodeApi() : {};
       

        let isJump = false; //是否在跳转中
        let isHide = false; //是否隐藏中

       
        $('[data-cmd]').on("click",function(){
            var cmd = $(this).data("cmd")
            if(cmd === 'allChapter'){
                var chapter = $("#chapter")
                chapter.css("left","0").addClass("show")
                var scrollHeight = 36 * activeChapterIndex - 60;                
                $("#chapterScroll").scrollTop(scrollHeight-20)

            }else{
                if(isJump) return;
                isJump = true;
                vscode.postMessage({
                    command: this.dataset.cmd,
                    data: {
                        index:activeChapterIndex
                    }
                });
            }
            
        })

        
        $("#chapter").on("click",'.close',function(){
            var chapter = $("#chapter");
            if(chapter.hasClass("show")){
                chapter.css("left","-100%").removeClass("show")
            }else{
                chapter.css("left","0").addClass("show")
            }
        })
        $("#chapter").on("click",'.item',function(){
            if(isJump) return;
            var index = $(this).data("index");
            isJump = true;
            vscode.postMessage({
                command: "specify",
                data: Number(index)
            });
        })

        

        $(document).on("dblclick",function(){
            var empty = $("#empty")
            var content = $("#content");
            if(isHide){
                isHide = false;
                vscode.postMessage({
                    command: "hidden",
                    data: 'show'
                });
                empty.hide();
                content.show();
                
            }else{
                isHide = true;
                vscode.postMessage({
                    command: "hidden",
                    data: 'hide'
                });
                content.hide();
                empty.show();
            }
        })

        $(document).on("click",function(){
           $("#contextmenu").hide();
        })
        $(document).on("contextmenu",function(event){
            if(isHide) return;
            $("#contextmenu").css({
                left:event.clientX+'px',
                top:event.clientY+'px'
            }).show()
            return false;
        })

        $(document).on("keydown",function(event){
            
            // [38 上箭头 ,32 空格 ,40 下箭头, 27 esc]
            if(![38,32,40,27].includes(event.keyCode)) return;
            var content = $("#content");
            if(isJump || isHide) return; //如果在跳转中或者隐藏中不执行操作
            var contentList = $("#contentList");

            var scrollHeight = content.height()
            var scrollTop = content.scrollTop();
            var contentHeight = contentList.height();
            
            if(event.keyCode === 27){
                vscode.postMessage({
                command: "close"
            });
            }else if(event.keyCode === 38){
                if(scrollTop > 0){
                    content.scrollTop(scrollTop - (scrollHeight-30))
                }
            }else if(event.keyCode === 40 || event.keyCode === 32){
                content.scrollTop(scrollTop + (scrollHeight-30));
                if(scrollTop >= (contentHeight-scrollHeight)){
                    isJump = true;
                    vscode.postMessage({
                        command: "nextChapter",
                        data: {
                            index:activeChapterIndex
                        }
                    });
                }
            } 
        })
       
    


    }())
</script>
</html>